<template>
  <div>
    <h2>自定义指令</h2>
    <!--
        作用：自己定义一个相应的指令供实现某类需求
        定义
           全局自定义指令
             Vue.directive(指令名,{
                指令的生命周期
                  bind:绑定时。类似于beforeMount,指令绑定于相应标签时执行，还没有完成渲染
                  inserted:渲染时，指令所在标签添加到父节点时执行，类似于mounted
                  update:更新时，不保证更新完成，只是指令所在组件有更新，且更新可能完成也可能没完成
                  componentUpdated:更新完成时。类似于updated，指令所在组件包括子组件都更新完成时执行
                  unbind:解绑时，类似于destroyed,指令所在标签销毁时执行， 组件销毁时它会执行 v-if='false'
               bind(dom,obj,vnode){
                   dom:指令所在dom
                   obj:{属性，修饰符，值},
                   vnode:指令所在dom节点信息
                       vnode.context===指令所在组件的this
               }
             })
           局部自定义指令
              directives:{
                  指令名:{
                    生命周期
                  }
              }

        使用：v-指令名:属性名.修饰符="值"
              v-on:keyup.enter="事件方法"

     -->
    <!-- input在渲染完成后聚焦点 -->
    <div style="padding-left: 50px">
      <div>{{ num }}</div>
      <button @click="num++">修改num</button>
      <button @click="bol = !bol">控制input是否显示</button>
      <input v-if="bol" v-xxx:aaa.bbb="fn" type="text">
    </div>
    <div>
      <!-- 需求：通过v-img渲染图片,img标签如果有src,src的优先级高于v-img的值,如果图片加载出错，以v-img图片为主 -->
      <button @click="imgSrc = 'https://img01.yzcdn.cn/vant/logo.png'">
        修改imgSrc的值
      </button>
      <img
        v-img="imgSrc"
        src="https://img01.yzcdn.cn/vant/logo123.png"
        alt=""
      >
    </div>
  </div>
</template>
<script>
export default {
  directives: {
    xxx: {
      bind(dom, obj, vnode) {
        console.log(vnode.context.num)
      },
      inserted(dom) {
        dom.focus()
      },
      update(dom, obj, vnode) {
        console.log('update')
      },
      componentUpdated() {
        console.log('componentUpdated更新完成了')
      },
      unbind(dom, obj, vnode) {
        console.log('unbind销毁了')
        console.log(vnode.context.num)
      }
    },
    img: {
      inserted(dom, obj) {
        dom.src = dom.src || obj.value
        // 监听事件，注册就会一直存在，只要dom不销毁它都一直存在
        // 好比click事件
        dom.onerror = () => {
          // 图片加载出错了，它就会执行后面的方法，它是一个监听事件
          dom.src = obj.value
        }
      },
      componentUpdated(dom, obj) {
        console.log('componentUpdated', obj)
        if (obj.value !== obj.oldValue) {
          dom.src = obj.value
        }
      }
    }
  },
  data() {
    return {
      num: 999,
      bol: true,
      imgSrc:
        'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'
    }
  },
  destroyed() {
    console.log('destroyed', this.num)
  },
  methods: {
    fn() {
      console.log('fn')
    }
  }
}
</script>
<style></style>
